<template>
  <table class="my-table">
    <thead>
      <tr class="table_th">
        <th>开发商</th>
        <th>获得的贷款(元)</th>
        <th>总投资额(元)</th>
        <th>开发贷款比例</th>
        <th>调整后资产负债率</th>
        <th>净负债率</th>
        <th>现金短债比</th>
      </tr>
    </thead>
    <tbody :class="step < 5 ? 'tbodyH':''">
      <vue3-seamless-scroll
        ref="seamlessScroll"
        :list="tableData"
        direction="up"
        :hover="true"
        :limitScrollNum="tableData.length"
        :step="step"
        class='seamless-warp'
        v-if="step > 0"
      >
        <tr class="table_td" v-for="(item, index) in tableData" :key="index" :class="item.condition?'fontColor':''">
          <td>{{item.kfs}}</td>
          <td>{{item.dkje}}</td>
          <td>{{item.ztze}}</td>
          <td>{{item.kfdkbl}}</td>
          <td>{{item.tzhzcfzl}}</td>
          <td>{{item.jfzl}}</td>
          <td>{{item.xjdzb}}</td>
        </tr>
      </vue3-seamless-scroll>
      <tr class="table_ts" v-for="(item, index) in tableData" :key="index" :class="item.condition?'fontColor':''" v-else>
          <td> {{item.kfs}}</td>
          <td>{{item.dkje}}</td>
          <td>{{item.ztze}}</td>
          <td>{{item.kfdkbl}}</td>
          <td>{{item.tzhzcfzl}}</td>
          <td>{{item.jfzl}}</td>
          <td>{{item.xjdzb}}</td>
        </tr>
    </tbody>
  </table>
</template>

<script setup lang="ts">
import { ref, watchEffect, onMounted, onUnmounted } from "vue";
import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
// 接收参数
const tableData = ref<any>([]);

const props = defineProps({
  housingSupplyStatsData: {
    type: Object,
    default: () => {},
  },
});
const step = ref(0);
const calculateStep = () => {
  // 获取视口的高度
  const viewportHeight = window.innerHeight;
  console.log(tableData.value.length)
  if (tableData.value.length > 5) {
    step.value = viewportHeight * 0.0003;
  }
};

// 监听索引变化
watchEffect(() => {
  tableData.value = props.housingSupplyStatsData.list;
  calculateStep();
});

onMounted(() => {
  window.addEventListener("resize", calculateStep);
});
onUnmounted(() => {
  window.removeEventListener("resize", calculateStep);
});
</script>

<style lang="less" scoped>
.tbodyH{
  height: 364px;
}
.table_th {
  width: 100%;
  height: 33px;
  background: linear-gradient(180deg, #2586ee 0%, rgba(37, 134, 238, 0.6) 100%);
  position: absolute;
  z-index: 1;
  display: flex;
  color: #fff;
  align-items: center;
  font-size: 14px;
}
.table_th th:nth-child(1) {
  flex: 0.9; /* 宽度比例为1 */
}

.table_th th:nth-child(2){
  flex: 1.6;
}
.table_th th:nth-child(3),
.table_th th:nth-child(4){
  flex: 1.5; /* 宽度比例为2 */
}
.table_th th:nth-child(5){
  flex: 2; 
}
.table_th th:nth-child(6){
  flex: 1; 
}
.table_th th:nth-child(7){
  flex: 1.4; 
}
.table_td {
  width: 100%;
  display: flex;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  height: 30px;
  align-items: center;
  background: #092140;
}
.table_td td:nth-child(1) {
  flex: 0.9; /* 宽度比例为1 */
  overflow: hidden;
}
.table_td td:nth-child(2){
  flex: 1.6;
}
.table_td td:nth-child(3),
.table_td td:nth-child(4){
  flex: 1.5; /* 宽度比例为2 */
}
.table_td td:nth-child(5){
  flex: 2; 
}
.table_td td:nth-child(6){
  flex: 1; 
}
.table_td td:nth-child(7){
  flex: 1.4; 
  
}
.table_td td{
  text-align: center;
}
.table_td:hover{
  color:#24E0E6;
  cursor: pointer;
}
.table_td {
  width: 100%;
  display: flex;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  height: 30px;
  align-items: center;
  background: #092140;
}
.table_ts {
  width: 100%;
  display: flex;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  height: 30px;
  align-items: center;
  background: #092140;
}
.table_ts:first-child{
  margin-top: 30px;
}
.table_ts td:nth-child(1) {
  flex: 0.9; /* 宽度比例为1 */
  overflow: hidden;

}
.table_ts td:nth-child(2){
  flex: 1.6;
}
.table_ts td:nth-child(3),
.table_ts td:nth-child(4){
  flex: 1.5; /* 宽度比例为2 */
}
.table_ts td:nth-child(5){
  flex: 2; 
}
.table_ts td:nth-child(6){
  flex: 1; 
}
.table_ts td:nth-child(7){
  flex: 1.4; 
  
}
.table_ts td{
  text-align: center;
}
.table_ts:hover{
  color:#24E0E6;
  cursor: pointer;
}
.seamless-warp {
  height: 335px;
  overflow: hidden;
  margin-top: 30px;
}
.seamless-warp .table_td:nth-child(even) {
  background: rgba(0, 0, 0, 0);
}
.table_ts:nth-child(even) {
  background: rgba(0, 0, 0, 0);
}

.cl-5c {
  color: #5cc40c;
  position: relative;
  top: 0.8px;
}
.cl-c4 {
  color: #c41e0c;
}
.fontColor{
  color: #c41e0c;
}
.tb {
  position: relative;
  top: 0px;
}
</style>
